<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <title>菜品修改</title>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
            animation: fadeIn 1s ease-in-out;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        .form-container {
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 16px;
        }
        .form-container:hover {
            transform: scale(1.03);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        input[type="text"],
        input[type="number"],
        input[type="datetime-local"] {
            transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        input[type="text"]:focus,
        input[type="number"]:focus,
        input[type="datetime-local"]:focus {
            border-color: #4f46e5;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
        }
        input[type="submit"] {
            transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
        }
        input[type="submit"]:hover {
            background-color: #4338ca;
            transform: translateY(-2px);
        }
        input[type="submit"]:active {
            transform: translateY(0);
        }
        input[type="radio"] {
            transition: transform 0.3s ease-in-out;
        }
        input[type="radio"]:checked {
            transform: scale(1.2);
        }
    </style>
</head>
<body class="min-h-screen flex flex-col justify-center items-center">
<div class="p-10 rounded-lg w-full max-w-md form-container">
    <h3 class="text-3xl font-bold mb-8 text-center text-gray-900 tracking-tight" >修改菜品</h3>
    <form action="/update" method="post" class="space-y-8">
        <input type="hidden" name="id" th:value="${dish.id}">
        <div>
            <label for="categoryName" class="block text-sm font-semibold text-gray-700">菜品分类名:</label>
            <input type="text" name="categoryName" th:value="${dish.categoryName}" class="mt-3 block w-full px-5 py-4 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent sm:text-sm">
        </div>
        <div>
            <label for="name" class="block text-sm font-semibold text-gray-700">菜品名:</label>
            <input type="text" name="name" th:value="${dish.name}" class="mt-3 block w-full px-5 py-4 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent sm:text-sm">
        </div>
        <div>
            <label for="price" class="block text-sm font-semibold text-gray-700">价格:</label>
            <input type="number" name="price" th:value="${dish.price}" class="mt-3 block w-full px-5 py-4 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent sm:text-sm">
        </div>
        <div>
            <label for="status" class="block text-sm font-semibold text-gray-700">状态:</label>
            <div class="flex space-x-8 mt-3">
                <div>
                    <input type="radio" name="status" th:value="0" th:checked="${dish.status==0}" class="form-radio text-blue-500 focus:ring-blue-500">
                    <label for="status-0" class="ml-3 text-sm text-gray-700">起售</label>
                </div>
                <div>
                    <input type="radio" name="status" th:value="1" th:checked="${dish.status==1}" class="form-radio text-blue-500 focus:ring-blue-500">
                    <label for="status-1" class="ml-3 text-sm text-gray-700">停售</label>
                </div>
            </div>
        </div>
        <div>
            <label for="createTime" class="block text-sm font-semibold text-gray-700">创建时间</label>
            <input type="datetime-local" name="createTime" th:value="${dish.createTime}" class="mt-3 block w-full px-5 py-4 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent sm:text-sm">
        </div>
        <div>
            <label for="updateTime" class="block text-sm font-semibold text-gray-700">更新时间</label>
            <input type="datetime-local" name="updateTime" th:value="${dish.updateTime}" class="mt-3 block w-full px-5 py-4 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent sm:text-sm">
        </div>
        <div>
            <input type="submit" value="修改" class="w-full flex justify-center py-4 px-8 border border-transparent rounded-xl shadow-sm text-lg font-bold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300">
        </div>
    </form>
</div>
</body>
</html>
